<template>
  <div>
    <div class="up_conter">
      <p class="up_tatle">轮播图：</p>
      <div class="updata" @click="imgnow">
        <div class="upload_img">
          <img src="@/views/partner/partner_img/Icon_up.png" alt="" />
        </div>
        <p>请上传logo</p>
        <div class="img">
          <div class="clos" @click.stop="close" v-show="showimg"></div>
          <img v-show="showimg" :src="img" alt="" />
        </div>
        <input
          style="display: none"
          ref="imgs"
          name="file"
          type="file"
          accept="image/*"
          @change="updateFace"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tableItem",
  data() {
    return {
      // 上传图片后的关闭图片显示隐藏
      showimg: false,
      //图片地址
      img: null,
    };
  },
  methods: {
    //点击上传图片
    imgnow() {
      this.$refs.imgs.click();
    },
    //调用图片
    updateFace(e) {
      const file = e.target.files[0] || e.dataTransfer.files[0];
      let URL = window.URL || window.webkitURL; // 获取当前域名地址
      this.img = URL.createObjectURL(file); // 拼接 URL + file 并转成 blob地址
      this.showimg = true;
      this.$refs.imgs.type = "text";
      this.$emit('func',this.img)
    },
    //关闭图片
    close() {
      this.showimg = false;
      this.$refs.imgs.type = "file";
    },
  },
};
</script>

<style lang="scss" scoped>
.up_conter {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 28px;
  .updata {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 101px;
    border-radius: 3px;
    margin-left: 24px;
    border: 1px solid #e6e6e6;
    background-color: #f2f2f2;
    .upload_img {
      width: 24px;
      height: 24px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      height: 24px;
      font-size: 14px;
      font-weight: 400;
      color: #45484d;
      line-height: 24px;
      margin-left: 4px;
    }
    .img {
      position: relative;
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      height: 101px;
      img {
        width: 100%;
        height: 100%;
        border: none;
      }
      .clos {
        width: 24px;
        height: 24px;
        background: url("../table_img/icon_clos.png") no-repeat center;
        background-size: 100% 100%;
        border-radius: 50%;
        position: absolute;
        right: -40px;
        top: -12px;
      }
    }
  }
}
</style>